<template name="cardItem">
	<view style="width: 100%">
		<view style="width: 100%;display: flex;margin-top: 10px;" v-for="(item,index) in list" :key="index">
			<view class="card-left">
				<!-- <u-lazy-load border-radius="20" :image="imgUrl+'ys-'+item.picture" @click="previewImg(imgUrl + item.picture)"></u-lazy-load> -->
				<!-- <u-image height="175" :src="imgUrl+'ys-'+item.picture" border-radius="20" @click="previewImg(imgUrl + item.picture)"></u-image> -->
				<image style="width: 100%; height: 175rpx;border-radius: 20rpx;"  :mode="widthFix" :src="imgUrl+'ys-'+item.picture" @click="previewImg(imgUrl + item.picture)"></image>
			</view>
			<view class="card-right" style="position: relative;">
				<view>
					<view class="title">{{item.name}}</view>
					<view style="margin-top: 8rpx;">
						<u-tag v-for="(item1,index1) in item.tags" :key="index1" border-color="#f4f4f4" :text="item1" mode="light" type="info"
						 color="black" style="margin-left: 2rpx;margin-right: 2rpx;padding: 0;" />
					</view>
					<view class="description" style="color: gray;font-size: smaller;margin-top: 8rpx;">{{item.description}}</view>
				</view>
				<view style="position: absolute;right: 5px;bottom: 0;">
					<u-number-box :min="0" :max="100" v-if="item.oftenMeal" @plus="numPlus" @minus="numMinus" :index="index" v-model="item.num"
					 style="float: right;" disabled-input />
					<view v-else>
						<u-tag shape="circle" text="暂无食材" mode="plain" type="warning" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'cardItem',
		props: {
			list: {
				type: Array,
				default: null
			},
			index: Number,
			imgUrl: String
		},
		mounted() {
			this.$emit("mounted", this.index)
		},
		created() {
		},
		methods: {
			previewImg(e) {
				// uni.previewImage({
				// 	urls: [e],
				// 	indicator: 'none'
				// })
				this.$emit("imgClick", e)
			},
			numPlus(value) {
				this.$emit("numPlus", this.index, value.index)
			},
			numMinus(value) {
				this.$emit("numMinus", this.index, value.index)
			},
		}
	}
</script>

<style>
	.card-left {
		width: 33.33%;
		height: 180rpx;
	}

	.card-right {
		margin-left: 3%;
		width: 63.66%;

	}

	.title {
		font-weight: bold;
		font-size: 30rpx;

	}

	.description {
		display: -webkit-box !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		word-break: break-all !important;
		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 2 !important;

	}

	.thumb-box {
		width: 100%;
		display: flex;
		// align-items: center;
		// justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
</style>
